import React, {useState} from 'react';
import {
  View,
  ScrollView,
  Text,
  StyleSheet,
  SafeAreaView,
  StatusBar,
  Dimensions,
} from 'react-native';
import Icons from 'react-native-vector-icons/FontAwesome';
import ZhiBoTypes from './ZhiBoTypes';
import Swiper from './Swiper';
import ZhiBoList from './ZhiBoList';
const {width, height} = Dimensions.get('window'); //获取设备的宽度和高度
const styles = StyleSheet.create({
  container: {
    // flex: 1,
    // display: 'flex',
    // flexDirection: 'column',
    // justifyContent: 'flex-start',
    // alignContent: 'flex-start',
    // alignItems: 'center',
    // 处理buttomTab遮挡的问题。注意，是否显示topBar,如果不显示，就要少减去height的值；
    height: height - 130,
    width: width,
  },
  containerScroll: {
    flex: 1,
    // height: height ,
    // paddingTop: StatusBar.currentHeight,
    // paddingBottom: 50,
  },
  headers: {
    display: 'flex',
    flexDirection: 'row',
    justifyContent: 'center',
    alignItems: 'center',
    width: '100%',
    height: 50,
    // backgroundColor: '#a1d5ec',
  },
  headerTabs: {
    width: '60%',
    height: 50,
    flex: 1,
    flexDirection: 'row',
    justifyContent: 'center',
    alignItems: 'center',
  },
  headerTabsItem: {
    marginLeft: 6,
    marginRight: 6,
  },
  activeTabs: {
    fontWeight: '800',
    fontSize: 16,
  },
  headerIcons: {
    width: 30,
    marginLeft: 10,
    marginRight: 5,
  },
  typesStyle: {
    width: '100%',
    height: 70,
    flexDirection: 'row',
    justifyContent: 'center',
    alignItems: 'center',
  },
  banners: {
    width: '90%',
    height: 100,
    backgroundColor: 'red',
    borderRadius: 5,
  },
});

const bannerImages = [
  {id: 1, image: require('./assets/banner1.png')},
  {id: 2, image: require('./assets/banner1.png')},
  {id: 3, image: require('./assets/banner1.png')},
];

export default function index() {
  const [isActiveTabs, setActiveTabs] = useState(true);
  const zhiBoTypes = [
    {
      id: 1,
      image: require('./assets/zhibo-type1.png'),
      title: '音乐',
    },
    {
      id: 2,
      image: require('./assets/zhibo-type2.png'),
      title: '颜值',
    },
    {
      id: 3,
      image: require('./assets/zhibo-type3.png'),
      title: '派对',
    },
    {
      id: 4,
      image: require('./assets/zhibo-type4.png'),
      title: '更多',
    },
  ];
  return (
    <SafeAreaView style={styles.container}>
      <ScrollView style={styles.containerScroll}>
        <View style={styles.headers}>
          <Icons
            style={styles.headerIcons}
            name="rocket"
            size={20}
            color="gray"></Icons>
          <View style={styles.headerTabs}>
            <Text style={styles.headerTabsItem}>最新</Text>
            <Text
              style={[
                styles.headerTabsItem,
                isActiveTabs && styles.activeTabs,
              ]}>
              推荐
            </Text>
            <Text style={styles.headerTabsItem}>附件</Text>
          </View>
          <Icons
            style={styles.headerIcons}
            name="search"
            size={20}
            color="gray"></Icons>
        </View>

        <View style={styles.typesStyle}>
          {zhiBoTypes.map(item => {
            return (
              <ZhiBoTypes
                key={item.id}
                image={item.image}
                title={item.title}></ZhiBoTypes>
            );
          })}
        </View>

        <Swiper images={bannerImages}></Swiper>

        <ZhiBoList />
      </ScrollView>
    </SafeAreaView>
  );
}
